<script setup lang="ts">
import { getHotArticle, getMainData } from '@/services/api/homePage';
import { navigateTo } from '@/utils';
import dayjs from 'dayjs';
import { onMounted, ref } from 'vue';

// 模拟文章数据
const articles = ref<Array<any>>([]);
const banners = ref<Array<any>>([]);
const categories = ref<Array<any>>([]);
const authors = ref<Array<any>>([]);
const topics = ref<Array<any>>([]);
const isLoading = ref(true);

// 数据加载
onMounted(async () => {
  try {
    const mainData = await getMainData();
    banners.value = mainData.banners;
    categories.value = mainData.categories;
    authors.value = mainData.authors;
    topics.value = mainData.topics;
    await loadData();
    isLoading.value = false;
  } catch (error) {
    console.error('Failed to fetch main data:', error);
  }
});

async function loadData() {
  try {
    const hotArticles = await getHotArticle({ pageNum: 1, pageSize: 10 });
    articles.value = hotArticles.list;
    isLoading.value = false;
    uni.stopPullDownRefresh();
  } catch (error) {
    console.error('Failed to fetch hot articles:', error);
  }
}

function handleRefresh() {
  isLoading.value = true;
  setTimeout(() => {
    loadData();
    isLoading.value = false;
    uni.stopPullDownRefresh();
  }, 1000);
}
</script>

<template>
  <view class="min-h-screen bg-gray-50 pb-20">
    <!-- 搜索栏 -->
    <view class="bg-white px-4 py-3 sticky top-0 z-10 shadow-sm">
      <view class="flex items-center bg-gray-50 rounded-full px-4 py-2 border border-gray-200">
        <uni-icons type="search" size="18" color="#9ca3af" />
        <input
          class="ml-2 bg-transparent flex-1 text-sm placeholder-gray-400 focus:outline-none"
          placeholder="搜索文章/作者"
          type="text"
        >
      </view>
    </view>

    <!-- 骨架屏 -->
    <template v-if="isLoading">
      <view class="px-4 py-4">
        <view class="animate-pulse">
          <view class="h-48 rounded-xl bg-gray-200 mb-6" />

          <view class="grid grid-cols-4 gap-4 mb-6">
            <view v-for="i in 4" :key="i" class="flex flex-col items-center">
              <view class="w-12 h-12 rounded-full bg-gray-200 mb-2" />
              <view class="h-4 w-12 bg-gray-200 rounded" />
            </view>
          </view>

          <view class="space-y-4">
            <view v-for="i in 2" :key="i" class="bg-white rounded-xl overflow-hidden">
              <view class="h-48 bg-gray-200" />
              <view class="p-4 space-y-3">
                <view class="h-4 bg-gray-200 rounded w-3/4" />
                <view class="h-4 bg-gray-200 rounded w-full" />
                <view class="h-4 bg-gray-200 rounded w-1/2" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>

    <template v-else>
      <!-- 轮播图 -->
      <swiper
        class="h-48 rounded-b-lg shadow-sm"
        indicator-dots
        autoplay
        circular
        interval="3000"
        indicator-active-color="#3b82f6"
      >
        <swiper-item v-for="banner in banners" :key="banner.id">
          <view class="relative w-full h-full">
            <image
              :src="banner.imageUrl"
              class="w-full h-full"
              mode="aspectFill"
            />
            <view class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
              <text class="text-white font-medium text-sm">
                {{ banner.title }}
              </text>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <!-- 分类导航 -->
      <view class="bg-white px-4 py-5 shadow-sm">
        <view class="grid grid-cols-4 gap-4">
          <view
            v-for="category in categories"
            :key="category.categoryId"
            class="flex flex-col items-center"
          >
            <view
              class="w-12 h-12 rounded-full flex items-center justify-center mb-2"
              :class="category.color"
            >
              <uni-icons :type="category.categoryIcon" size="24" />
            </view>
            <text class="text-xs text-gray-600 font-medium">
              {{ category.categoryName }}
            </text>
          </view>
        </view>
      </view>

      <!-- 热门作者 -->
      <view class="bg-white px-4 py-4 mt-3 shadow-sm">
        <view class="flex justify-between items-center mb-3">
          <text class="text-lg font-bold text-gray-800">
            热门作者
          </text>
          <view class="text-sm text-blue-500 flex items-center">
            更多
            <uni-icons type="right" size="14" color="#3b82f6" />
          </view>
        </view>

        <scroll-view scroll-x class="w-full whitespace-nowrap py-2">
          <view
            v-for="author in authors"
            :key="author.userId"
            class="inline-flex flex-col items-center mr-6 last:mr-0"
          >
            <image
              :src="author.avatar"
              class="w-16 h-16 rounded-full border-2 border-white shadow-md"
            />
            <text class="text-sm font-medium mt-2 text-gray-800">
              {{ author.nickname }}
            </text>
            <text class="text-xs text-gray-500">
              {{ author.follower.toLocaleString() }}粉丝
            </text>
          </view>
        </scroll-view>
      </view>

      <!-- 专题推荐 -->
      <view class="bg-white px-4 py-4 mt-3 shadow-sm">
        <view class="flex justify-between items-center mb-3">
          <text class="text-lg font-bold text-gray-800">
            专题推荐
          </text>
          <view class="text-sm text-blue-500 flex items-center">
            更多
            <uni-icons type="right" size="14" color="#3b82f6" />
          </view>
        </view>

        <view class="grid grid-cols-3 gap-2">
          <view
            v-for="topic in topics"
            :key="topic.id"
            class="relative rounded-lg overflow-hidden h-24"
          >
            <image
              :src="topic.cover"
              class="w-full h-full"
              mode="aspectFill"
            />
            <view class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-2">
              <text class="text-white text-xs font-medium line-clamp-1">
                {{ topic.title }}
              </text>
            </view>
            <view class="absolute top-1 left-1 bg-white/90 text-xs px-1 rounded text-gray-800">
              {{ topic.articles }}篇
            </view>
          </view>
        </view>
      </view>

      <!-- 文章列表 -->
      <view class="px-4 py-4">
        <view class="flex justify-between items-center mb-4">
          <text class="text-xl font-bold text-gray-800">
            热门文章
          </text>
          <view class="text-sm text-blue-500 flex items-center">
            更多
            <uni-icons type="right" size="14" color="#3b82f6" />
          </view>
        </view>

        <view class="space-y-4">
          <view
            v-for="article in articles"
            :key="article.blogId"
            class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 active:scale-[0.98]"
            @click="navigateTo(`/pages/article/index?id=${article.blogId}`)"
          >
            <view class="relative">
              <image
                :src="article.blogCoverImage"
                class="w-full h-48 object-cover"
                mode="aspectFill"
              />
              <view class="absolute bottom-2 left-2">
                <view
                  v-for="tag in article.blogTags"
                  :key="tag"
                  class="inline-block bg-white/90 text-gray-800 text-xs px-2 py-1 rounded-full mr-1 mb-1 shadow-sm"
                >
                  #{{ tag }}
                </view>
              </view>
            </view>

            <view class="p-4">
              <view class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">
                {{ article.blogTitle }}
              </view>

              <view class="flex items-center mb-3">
                <image
                  :src="article.avatar"
                  class="w-6 h-6 rounded-full mr-2 border border-gray-200"
                />
                <text class="text-sm text-gray-600">
                  {{ article.author }}
                </text>
                <text class="text-xs text-gray-400 ml-2">
                  {{ dayjs(article.createTime).format('YYYY-MM-DD') }}
                </text>
              </view>

              <view class="flex justify-between items-center text-xs text-gray-500 border-t border-gray-100 pt-3">
                <view class="flex items-center">
                  <uni-icons type="eye" size="14" class="mr-1 text-gray-400" />
                  <text class="mr-3">
                    {{ article.blogViews.toLocaleString() }}
                  </text>
                  <uni-icons type="hand-thumbsup" size="14" class="mr-1 text-gray-400" />
                  <text>{{ article.likes.toLocaleString() }}</text>
                </view>
                <view class="text-blue-500 flex items-center">
                  阅读全文
                  <uni-icons type="right" size="12" color="#3b82f6" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>

    <!-- 发布按钮 -->
    <view class="fixed bottom-20 right-4 z-10">
      <button
        class="w-14 h-14 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg active:bg-blue-600"
        @click="$emit('publish')"
      >
        <uni-icons type="plusempty" size="24" color="#fff" />
      </button>
    </view>
  </view>
</template>

<style lang="scss">
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* 添加刷新动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.refresh-icon {
  animation: rotate 1s linear infinite;
}
</style>
